<template>
    <div class="container">
        <!-- 购物车 -->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
                        <mt-switch v-model="$store.getters.goodsSwitch[1]" @change="statesChange(1,$store.getters.goodsSwitch[1])"></mt-switch>

                        <!-- <div class="mui-switch mui-switch-blue mui-switch-mini">
					    	<div class="mui-switch-handle"></div>
					    </div> -->
                        <div class="goods-pic"><img src="https://img.alicdn.com/imgextra/i4/2515486370/O1CN01VNoF3h1wvVQ5vmYhV_!!2515486370.jpg_640x640q85s150_.webp" alt=""></div>
                        <div class="box">
                            <h3>华为（HUAWEI）荣耀6Plus 16G双4G版</h3>
                            <p >
                                <span class="price">￥2195</span><carprice :num = "this.$store.getters.getNum[1]" class="goods-num"></carprice>
                                <a @click.prevent="deleGoods(1)"><span class="del">删除</span></a>
                            </p>
                        </div>
					</div>
				</div>
			</div>
       
        <!-- 结算 -->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<div class="left">
                            <p>总算（不含运费）</p>
                            <p>已勾选商品<span class="price"> {{this.$store.getters.getPrice.amount}} </span>件，总计:<span class="price"> ￥{{this.$store.getters.getPrice.price}} </span></p>
                        </div>
                        <div>
                            <mt-button type="danger" size="small">去结算</mt-button>
                        </div>
					</div>
				</div>
		</div>

						
			
    </div>
</template>
<script>
import mui from '../../lib/Mui/js/mui.min.js'
import car_price from '../common/car_price.vue'


    export default {
       components:{
           carprice:car_price
       },
       mounted:function (){
            mui('.mui-switch')['switch']()
       },
       methods:{
           statesChange(id,val){
               this.$store.commit('changeState',{id,selected:val})
           },
           deleGoods(id){
               this.$store.commit('deleGoods',id)
           }
       }
    }
</script>
<style lang="scss" scoped>
.container {
    background-color: #eee;
    overflow: hidden;
     .mui-card{
       
         .mui-card-content-inner {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            width: 100%;
            align-items: center;

            .mui-switch mui-switch-blue mui-switch-mini{
                width: 100px;
            }

            .goods-pic {
                     width:40px;
                    margin: 0 10px;

               
                }
            
            .box {
                width: 59%;
                // background-color: #eee;
                
                
                h3 {
                    font-size: 13px;
                    font-weight: 700;
                    color: #333;
                    word-break:break-all

                }
                p {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    // justify-content: space-between;
                    margin: 10px 0 0 0 ;
                    
                    
                    
                    
                   

                    .goods-num {
                        margin: 0 5px;
                    }
                }
                
                

            }
            .mui-card-content {
                width: 100%
            }



            .goods-num {
                display: inline-block
            }




        }

         
        
    }
    .price {
            color: red;
            font-weight: 700;
            font-size: 16px;
            font-family: 'Arial'
        }
    
    
   
}

   
</style>